<template
  type="text/x-template"
  id="c2-upgrade">
  <div
    class="modal-fullscreen addtoplaylist-panel"
    @click.self="closePromo"
    @contextmenu.self="closePromo">
    <div class="modal-window">
      <div class="modal-header">
        <div class="modal-title">Cider 2 Free Upgrade — Last Call!</div>
        <button
          class="close-btn"
          @click="closePromo"
          :aria-label="app.getLz('action.close')"></button>
      </div>
      <div
        class="modal-content"
        style="text-align: center">
        <img
          src="./assets/c1-c2.png"
          style="margin: 12px 22px 0; pointer-events: none" />
        <p
          class="p-3"
          style="font-size: 14px">
          Earlier this year, we released Cider 2, a complete rewrite of Cider.
          <br />Cider 2 is a paid upgrade, but we're offering it <b>for free</b> to Cider users who have purchased Cider 1.
          <br />
          <br />
          Download Cider 2 from the Microsoft Store today!
          <br />

          <br />
          <b>This limited offer is valid until June 4th, 2023.</b>
          <br />
          <br />
          <i>Upon opening the website, please click "Get in Store app" to continue.</i>
          <br />
          <br />
          <label>
            <input
              type="checkbox"
              style="accent-color: var(--keyColor)"
              v-model="showOnStartup" />
            Show this reminder again on next startup
          </label>
          <template v-if="hasSeen">
            <br />
            <label>
              <input
                type="checkbox"
                style="accent-color: var(--keyColor)"
                v-model="removeItemFromMainMenu" />
              Remove upgrade button from Quick Navigation/Main Menu
            </label>
          </template>
        </p>
      </div>
      <div
        class="modal-search"
        style="padding: 12px">
        <button
          class="btn btn-primary"
          @click="openStore"
          style="width: 100%">
          Open in Microsoft Store
        </button>
        <button
          class="btn btn-secondary"
          @click="closePromo"
          style="width: 100%; margin-top: 1em">
          Close
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  Vue.component("c2-upgrade", {
    template: "#c2-upgrade",
    data: function () {
      return {
        app: this.$root,
        showOnStartup: true,
        hasSeen: localStorage.getItem("seenC2Upgrade"),
        removeItemFromMainMenu: false,
      };
    },
    methods: {
      closePromo() {
        this.app.modals.c2Upgrade = false;
        if (!this.showOnStartup) {
          localStorage.setItem("noC2Startup", true);
        }
        if (this.removeItemFromMainMenu) {
          localStorage.setItem("noC2Upgrade", true);
          app.chrome.noC2Upgrade = true;
        }
        localStorage.setItem("seenC2Upgrade", true);
      },
      openStore() {
        window.open("https://www.microsoft.com/store/productId/9PL8WPH0QK9M");
      },
    },
  });
</script>
